<template>
    <div >
        <!-- 这里要记住不能v-for绑定el-row -->
        <div v-for="( item, index ) in forums" :key="item.topicId" class="land">
            <!-- 第一条信息 -->
            <el-col>
                <h1>主题:{{ item.topic }}</h1>
                <p>部分内容:{{ item.thread }}</p>
                <h4>农产品:{{ item.plant }}</h4>
                <h4>土地位置:{{ item.position }}</h4>
            </el-col>

        </div>
        <el-button class="upload">
            发布帖子
        </el-button>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            showStatusBar: false,
            forums: [
                {
                    topicId: "",
                    topic: "帖子A",
                    thread: "总的体验感是很不错的，作为购买者可以在小程序内清晰看到购买的农产品的详细信息，收到货也放心，可以保证是真正的绿色蔬菜，家人吃的也很安心，收到货后也很新鲜，物流还是很快的。",
                    plant: "土豆",
                    position: "东区1号",
                },
                {
                    topicId: "",
                    topic: "帖子B",
                    thread: "小程序内可以看到完整的农作物信息，以及生长区域，感觉还是比较新奇的，偶尔也会点进去看看购买的农作物的生长情况，物流信息也很透明，也不用担心会出现食品安全问题，感觉在购买的同时也提高了自己对农作物的了解，下次还会购买的。",
                    plant: "西红柿",
                    position: "西区2号",
                },
                {
                    topicId: "",
                    topic: "帖子C",
                    thread: "小程序整体风格都给人一种原始生态的感觉，点进去观感很好，购买的农产品收到后也很新鲜可口，主要是自己看着种出来的过程还是很有收获感的，购买的整套流程也很简单，让人易懂，方便上手。",
                    plant: "梨子",
                    position: "西区3号",
                },

            ]

        }
    }
}
</script>
  
<style scoped>

.box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 10px;
    text-align: center;
    line-height: 200px;
    font-size: 20px;
}

.el-col {
    border: solid 1px black;
    padding-left: 20px;
}

.status-bar {
    height: 100px;
    background-color: #eee;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
}

.upload {
    background-color: #4bbf5c;
    height: 60px;
    width: 150px;
    margin-left: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
    transform: translate(-50%, 0);
    color: white;
    font-size: 28px;
    text-align: center;
    line-height: 60px;
    border-radius: 15px;
}
</style>
  